import CommonTable from '@/components/CommonTable';
import Iconfont from '@/components/IconFont';
import { Popover, Typography } from 'antd';

const { Paragraph } = Typography;

const TableList = ({ data, editNote }) => {
  const columns = [
    {
      title: '物流公司',
      dataIndex: 'logisticsCompany',
      key: 'logisticsCompany',
      width: 100,
    },
    {
      title: '物流单号',
      dataIndex: 'logisticsNo',
      key: 'logisticsNo',
      width: 100,
      render: (text, record) => {
        return (
          <div className="myParagraph">
            <Paragraph copyable={{ text: text }}>{text}</Paragraph>
          </div>
        );
      },
    },
    {
      title: '包裹重量',
      dataIndex: 'weight',
      key: 'weight',
      width: 100,
    },
    {
      title: '数据获取方式',
      dataIndex: 'srcName',
      key: 'srcName',
      width: 100,
    },
    {
      title: '创建人',
      dataIndex: 'createAccount',
      key: 'createAccount',
      width: 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150,
    },
    {
      title: '备注',
      dataIndex: 'note',
      key: 'note',
      width: 130,
      render: (text, record) => {
        return (
          <div style={{ display: 'flex' }}>
            <Popover
              content={
                <div className="custom-ant-popver-content">{text || ''}</div>
              }
            >
              <span className="textOverflowMultiTwo">{text || ''}</span>
            </Popover>
            <div onClick={() => handleEditNote(record)}>
              <Iconfont
                className="common-color2"
                style={{
                  fontSize: '14px',
                  marginLeft: '8px',
                  // marginTop: '6px',
                  marginRight: '46px',
                }}
                type="iconbianji1"
              />
            </div>
          </div>
        );
      },
    },
  ];

  //点击修改备注
  const handleEditNote = (record) => {
    editNote(record);
  };

  const tableProps = {
    data,
    columns,
    scroll: { y: 300 },
    rowKey: 'id',
  };

  return (
    <div>
      <CommonTable {...tableProps} />
    </div>
  );
};

export default TableList;
